<template>
	<view class="page-team">
		<view class="content">
			<!-- <view class="Recommender" v-if="userInfo.spreadUid != 0">
				<view class="title">
					▎推荐人
				</view>
				<view class="box">
					<view class="left">
						<image :src="recommend_avatar"></image>
						<view class="userID">
							(ID:{{ recommend_Id }})
						</view>
					</view>
					<view class="right">
						<view class="name">
							{{ recommend_name.length > 13 ? recommend_name.substring(0, 13) + "..." : recommend_name }}
						</view>
						<view class="store">
							<text v-if="recommend_level == 1">游客</text>
							<text v-if="recommend_level == 2">店主</text>
							<text v-if="recommend_level == 3">新媒体运营师</text>
							<text v-if="recommend_level == 4">联营公司</text>
						</view>
						<view class="time">
							加入时间: {{ recommend_time }}
						</view>
						<view class="phone" v-if="recommend_phone">
							电话: {{ recommend_phone }}
						</view>
	
						<view class="tel-phone" v-if="recommend_phone">
							<view @click="telPhone">
								拨打
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="Statistics">
				<view class="top">
					<view class="bgbox">
					</view>
					<view class="title">
						直属人数
					</view>
					<view class="store">
						{{under_count}}
					</view>
					<view class="title">
						当月业绩
					</view>
					<view class="store">
						{{vip_total_sum}}
					</view>
					<!-- <view class="group">
						游客人数： {{normal_count}}
					</view>
					<view class="total">
						总团队人数： {{total_count}}
					</view> -->
					<view class="privilege" v-if="userInfo.isThrough == 'Y'">
						<view class="icon">
							<image src="https://h5.ylsp.vip/file/static/index-06.png" mode=""></image>
						</view>
						<view class="privilegeTitle">
							激活可用名额：{{ userInfo.diamondsHroughTrain + userInfo.goldHroughTrain + userInfo.vipHroughTrain }}
						</view>
						
						<view class="btnDetails" @click="privilegeDetails()">
							查看详情
						</view>
					</view>
				</view>
				<!-- <view class="bottom">
					<view class="td">
						<view class="span">
							{{total_order_count}}
						</view>
						<view class="text">
							我的单量
						</view>
					</view>
					<view class="td">
						<view class="span">
							{{ vip_directly_count }}
						</view>
						<view class="text">
							直属总单量
						</view>
					</view>
				</view> -->
			</view>
			<view class="directlyUnder">
				<!-- <view class="title">
					▎直属团队
				</view> -->
				<view class="tab_box">
					<view class="tab_item" :class="{activeItem:tabIndex==0}" @click="tabClick(0)">直属团队</view>
					<view class="tab_item" :class="{activeItem:tabIndex==1}" @click="tabClick(1)">团队</view>
				</view>
				<view class="search">
					<view class="left">
						<input :placeholder="tabIndex==0?'请输入用户名或手机号':'请输入用户名或用户ID或手机号'" v-model="screen.keyword" @input="inputSubmitForm"
							confirm-type="search" @confirm="submitForm" />
						<text class="icon iconfont icon-sousuo" @click="submitForm"></text>
					</view>
					<view class="right">
						<view class="btn" @click="screenClick">
							等级筛选<text class="iconfont icon-pailie"></text>
						</view>
					</view>
					<!-- <view class="list">
						<view class="tab" v-if="Grade_a > 0">
							游客: {{Grade_a}}
						</view>
						<view class="tab" v-if="Grade_b > 0">
							店主: {{Grade_b}}
						</view>
						<view class="tab" v-if="Grade_d > 0">
							新媒体运营师: {{Grade_d}}
						</view>
						<view class="tab" v-if="Grade_e > 0">
							联营公司: {{Grade_e}}
						</view>
					</view> -->
				</view>
			</view>
			<view class="member">
				<view class="Recommender" v-for="(val, spreadListIndex) in spreadList" :key="spreadListIndex"
					@click="directlyUnder(val.avatar,val.uid,val.nickname,val.level,val.time,val.phone,val.isOpenLian,val.isOpenCrown)">
					<view class="box">
						<view class="left">
							<image :src="val.avatar"></image>
							<view class="userID">
								(ID:{{ val.uid }})
							</view>
						</view>
						<view class="right">
							<view class="name">
								{{ val.nickname.length > 13 ? val.nickname.substring(0, 13) + "..." : val.nickname }}
							</view>
							<view class="store">
								<text v-if="val.level == 1">游客</text>
								<text v-if="val.level == 2">VIP</text>
								<!-- <text v-if="val.level == 2"></text> -->
								<text v-if="val.level == 3">联创</text>
								<text v-if="val.level == 4">{{val.isOpenCrown == 'Y'?'联营公司1':'联营公司'}}</text>
								<text class="privilege" v-if="val.level < 2 && userInfo.isThrough == 'Y'" @tap.stop="privilege(val)">调整等级</text>
							</view>
							<view class="time">
								加入时间: {{ val.time }}
							</view>
							<view class="phone" v-if="val.phone">
								手机号: {{ val.phone }}
							</view>
							<view class="copy-phone R-copy-phone" v-if="val.phone">
								<!-- #ifdef MP-WEIXIN -->
								<view @tap.stop="copyClipboard(val.phone)">
									复制
								</view>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<view class="copy-h5" @tap.stop="copyLink(val.phone)">
									复制
								</view>
								<!-- #endif -->
							</view>
							<view class="tel-phone Recommender-phone" v-if="val.phone">
								<view @tap.stop="telPhoneRec(val.phone)">
									拨打
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="record-bg" v-if="record">
					<image src="https://h5.ylsp.vip/file/static/record-bg.png"></image>
				</view>
				<Loading :loaded="loaded" :loading="loading"></Loading>
			</view>
		</view>
		<view class="page-screen" v-show="screenShow" @click="hideScreen">
		</view>
		<view class="screen-box" :class="screenShow ? 'active' : 'hideBox'">
			<view class="title">
				等级筛选
			</view>
			<view class="Grade-box">
				<view class="button" @click="choiceGrade(0)" :class="Grade_a_Active == 0? 'active' : ''">
					游客
				</view>
				<view class="button" @click="choiceGrade(1)" :class="Grade_a_Active == 1? 'active' : ''">
					VIP
				</view>
				<!-- <view class="button" @click="choiceGrade(2)" :class="Grade_a_Active == 2? 'active' : ''">
					经理
				</view> -->
				<view class="button" @click="choiceGrade(3)" :class="Grade_a_Active == 3? 'active' : ''">
					联创
				</view>
				<!-- <view class="button" @click="choiceGrade(4)" :class="Grade_a_Active == 4? 'active' : ''">
					联营公司
				</view> -->
			</view>
			<view class="defineBtn">
				<view class="tab" @click="Reset">
					重置
				</view>
				<view class="tab" @click="ascertain">
					确定
				</view>
			</view>
		</view>
		<view class="filter-view" :class="filter ? 'privilegeActive' : 'privilegeHideBox'">
			<view class="title">
				选择等级
			</view>
			<view class="box-view">
				<view class="item" @click="SelectType(1)" v-if="vipHroughTrainbtn" :class="filterBtnType == 1?'active' :''">
					VIP（{{ userInfo.vipHroughTrain }}）
				</view>
				<!-- <view class="item" @click="SelectType(2)" v-if="goldHroughTrainbtn" :class="filterBtnType == 2?'active':''">
					经理（{{ userInfo.goldHroughTrain }}）
				</view> -->
				<!-- <view class="item" @click="SelectType(3)" v-if="diamondsHroughTrainbtn" :class="filterBtnType == 3?'active':''">
					团长（{{ userInfo.diamondsHroughTrain }}）
				</view> -->
			</view>
			<view class="footer">
				<view class="button" @click="hideModalView">取消</view>
				<view class="button" @click="determine">确定</view>
			</view>
		</view>
		<view class="filter-view-bg" v-if="filter" @click="hideModalView">
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import Clipboard from 'clipboard';
	import {
		getSpreadUser,
		getSpreadUser4new,
		getSpreadPeople4Team,
		UserAuthChildLevel
	} from "@/api/user";
	import {
		copyClipboard
	} from "@/utils";
	import Loading from "@/components/Loading";
	const NAME = "team";
	export default {
		components: {
			Loading
		},
		data() {
			return {
				filter: false,
				filterBtnType: 0,
				screenShow: false,
				Grade_a_Active: 6,
				vipHroughTrainbtn: false,
				goldHroughTrainbtn: false,
				diamondsHroughTrainbtn: false,
				throughTrainQuota: 0,
				directlyUnderUser: {
					uid: 0,
					level: 0,
					name: '',
					phone: ''
				},
				Grade_a: 0,
				Grade_b: 0,
				Grade_d: 0,
				Grade_e: 0,
				Grade_f: 0,
				Grade_g: 0,
				fixedState: false,
				screen: {
					page: 1,
					limit: 10,
					grade: 0,
					keyword: "",
					sort: ""
				},
				childCount: 2,
				numberCount: 2,
				orderCount: 2,
				loaded: false,
				loading: false,
				spreadList: [],
				loadTitle: "",
				first: "",
				level: 7,
				second: "",
				record: false,
				recommend_avatar: '',
				recommend_level: 0,
				recommend_Id: '',
				recommend_name: '',
				recommend_time: '',
				recommend_phone: '',
				under_count: 0, //直属会员数
				normal_count: 0, //普通会员数人数
				total_count: 0, //总团队人数
				total_order_count: 0, // 团队总单数
				vip_hd_count: 0, //299总单数
				vip_total_sum: 0, //总业绩
				vip_directly_count: 0, //299直属总单数
				// tab切换
				tabIndex: 0,
			}
		},
		computed: mapGetters(["userInfo"]),
		mounted: function() {
			this.updateUserData();
			this.getSpreadUsers();
		},
		onReachBottom() {
			!this.loading && this.getSpreadUsers();
		},
		methods: {
			copyClipboard,
			screenClick() {
				this.screenShow = true
			},
			updateUserData(){
				this.$store.dispatch('getUser', true)
				this.throughTrainQuota = this.userInfo.diamondsHroughTrain + this.userInfo.goldHroughTrain + this.userInfo.vipHroughTrain
			},
			privilege(val) {
				console.log(val.level)
				this.directlyUnderUser.uid = val.uid;
				this.directlyUnderUser.level = val.level;
				this.directlyUnderUser.name = val.nickname;
				this.directlyUnderUser.phone = val.phone
				if(val.level == 1){
					this.vipHroughTrainbtn = true
					this.goldHroughTrainbtn = true
					this.diamondsHroughTrainbtn = true
				}else if(val.level == 2){
					this.vipHroughTrainbtn = false
					this.goldHroughTrainbtn = true
					this.diamondsHroughTrainbtn = true
				}else{
					this.vipHroughTrainbtn = false
					this.goldHroughTrainbtn = false
					this.diamondsHroughTrainbtn = true
				}
				this.filterBtnType = 0
				this.filter = true
			},
			SelectType(type) {
				let _type = type
				this.filterBtnType = type
			},
			hideModalView() {
				this.filter = false
			},
			determine() {
				let type = this.filterBtnType
				if(type == 1){
					if(this.userInfo.vipHroughTrain <= 0){
						this.trainShowToast()
						return
					}else this.determineUpgrade(this.directlyUnderUser,this.filterBtnType)
				}else if(type == 2){
					if(this.userInfo.goldHroughTrain <= 0){
						this.trainShowToast()
						return
					}else this.determineUpgrade(this.directlyUnderUser,this.filterBtnType)
				}else{
					if(this.userInfo.diamondsHroughTrain <= 0){
						this.trainShowToast()
						return
					}else this.determineUpgrade(this.directlyUnderUser,this.filterBtnType)
				}
			},
			
			determineUpgrade(user,type){
				uni.showModal({
					title: '温馨提示',
					content: '确认要给 "' + user.name + '" 升级？，此行为会扣减相应的直通车名额且不能恢复，请核对无误再操作。',
					success: function(res) {
						if (res.confirm) {
							this.hideModalView()
							uni.showLoading({
								title: '加载中',
							})
							this.authChildLevel(type,user.uid)
							
						} else if (res.cancel) {}
					}.bind(this)
				});
			},
			
			authChildLevel(level,uid){
				let that = this
				UserAuthChildLevel(level,uid).then(res => {
					this.updateUserData()
					this.submitForm()
					uni.hideLoading()
				})
				.catch(error => {
					uni.hideLoading()
				})
			},
			
			trainShowToast(){
				uni.showToast({
					title: "您的名额不足!",
					icon: "none",
					duration: 2000,
				});
			},
			telPhone() {
				uni.makePhoneCall({
					phoneNumber: this.recommend_phone,
					success: (res) => {},
					fail: (res) => {}
				});
			},
			telPhoneRec(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {},
					fail: (res) => {}
				});
			},
			hideScreen() {
				this.screenShow = false
			},
			choiceGrade(index) {
				let _index = index;
				this.Grade_a_Active = _index
			},
			Reset() {
				this.Grade_a_Active = 6;
			},
			ascertain() {
				this.screenShow = false
				this.$set(this, "spreadList", []);
				this.screen.page = 1;
				this.loaded = false;
				this.loading = false;
				if (this.Grade_a_Active >= 6) {
					this.level = 7
				} else {
					this.level = this.Grade_a_Active;
				}
				this.getSpreadUsers();
			},
			directlyUnder(avatar, uid, nickname, level, time, phone, isOpenLian, isOpenCrown) {
				this.$yrouter.push({
					path: "/pages/team/directlyUnder/index",
					query: {
						avatar: avatar,
						uid: uid,
						nickname: nickname,
						level: level,
						time: time,
						phone: phone,
						isOpenLian: isOpenLian,
						isOpenCrown: isOpenCrown
					},
				});
			},
			privilegeDetails(quota,id) {
				this.$yrouter.push({
					path: "/pages/team/privilegeDetails/index",
					query: {
						uid: id,
						quota: quota
					},
				});
			},
			// tab点击切换
			tabClick(index) {
				console.log(index);
				console.log(this.tabIndex);
				if (index != this.tabIndex) {
					this.spreadList = []
					this.$set(this, "spreadList", []);
					this.screen.keyword = ""
					this.tabIndex = index;
					this.Reset()
				}
			},
			inputSubmitForm() {
				if (this.tabIndex == 0) {
					this.submitForm()
				}
			},
			submitForm: function() {
				this.$set(this, "spreadList", []);
				this.screen.page = 1;
				this.loaded = false;
				this.loading = false;
				setTimeout(() => {
					this.getSpreadUsers();
				}, 1000);
			},
			getSpreadUsers: function() {
				/* let that = this,
					screen = that.screen;
				if (that.loaded || that.loading) return;
				that.loading = true; */
				if (this.tabIndex == 0) {
					this.loaded = false;
					this.getDirectMembers()
				} else {
					this.loaded = true;
					if (this.screen.keyword) {
					this.getGroupData()
					}
				}
				/* getSpreadUser4new(screen, that.level).then(
					res => {
						console.log(res.data.list)
						that.loading = false;
						that.spreadList.push.apply(that.spreadList, res.data.list);
						that.loaded = res.data.list.length < that.screen.limit;
						that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
						that.screen.page = that.screen.page + 1;
						that.first = res.data.total;
						that.second = res.data.totalLevel;
						that.under_count = res.data.under_count;
						that.vip_total_sum = res.data.vip_total_sum;
						that.normal_count = res.data.normal_count
						that.total_count = res.data.total_count
						that.total_order_count = res.data.total_order_count
						that.vip_hd_count = res.data.vip_hd_count
						that.vip_directly_count = res.data.vip_directly_count
						if (that.userInfo.spreadUid != 0) {
							that.recommend_avatar = res.data.parentUser.avatar;
							that.recommend_level = res.data.parentUser.level;
							that.recommend_Id = res.data.parentUser.uid;
							that.recommend_name = res.data.parentUser.wxProfile.nickname;
							that.recommend_time = res.data.parentUser.createTime;
							that.recommend_phone = res.data.parentUser.phone;
						}
						if (that.spreadList.length == 0) {
							that.record = true
						} else {
							that.record = false
						}
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000
						});
					},
					300
				); */
			},
			// 查询直属团队
						getDirectMembers() {
							let that = this,
								screen = that.screen;
							this.loading = true;
							getSpreadUser4new(screen, that.level).then(
								res => {
									console.log('res', res)
									that.loading = false;
									that.spreadList.push.apply(that.spreadList, res.data.list);
									that.loaded = res.data.list.length < that.screen.limit;
									that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
									that.screen.page = that.screen.page + 1;
									that.first = res.data.total;
									that.second = res.data.totalLevel;
									that.under_count = res.data.under_count;
									that.vip_total_sum = res.data.vip_total_sum;
									that.normal_count = res.data.normal_count
									that.total_count = res.data.total_count
									that.total_order_count = res.data.total_order_count
									that.vip_hd_count = res.data.vip_hd_count
									that.vip_directly_count = res.data.vip_directly_count
									//that.monthEnterprise=res.data.current_month_count
									if (that.userInfo.spreadUid != 0) {
										that.recommend_avatar = res.data.parentUser.avatar;
										that.recommend_level = res.data.parentUser.level;
										that.recommend_Id = res.data.parentUser.uid;
										that.recommend_name = res.data.parentUser.nickname;
										that.recommend_time = res.data.parentUser.createTime;
										that.recommend_phone = res.data.parentUser.phone;
									}
									if (that.spreadList.length == 0) {
										that.record = true
									} else {
										that.record = false
									}
								},
								err => {
									uni.showToast({
										title: err.msg || err.response.data.msg || err.response.data.message,
										icon: "none",
										duration: 2000
									});
								},
								300
							);
						},
			
						// 查询团队
						getGroupData() {
							this.loading = true;
							const options = Object.assign({
								level: this.level
							}, this.screen)
							console.log(this.screen, this.level, options)
							getSpreadPeople4Team(options).then(res => {
								console.log("res", res)
								this.loading = false;
								const data = res.data || {};
								const list = data.list || [];
								const length = list.length
								this.loaded = length < this.screen.limit;
								this.loadTitle = this.loaded ? "人家是有底线的" : "上拉加载更多";
								if (length) {
									this.spreadList.push.apply(this.spreadList, list);
									this.screen.page = this.screen.page + 1;
								}
							})
						},
			copyLink(data) {
				let clipboard = new Clipboard('.copy-h5', {
					text: function() {
						return data
					}
				})
				clipboard.on('success', function(e) {
					console.info('Action:', e.action);
					console.info('Text:', e.text);
					console.info('Trigger:', e.trigger);
					e.clearSelection();
					uni.showToast({
						icon: 'success',
						title: '复制成功~',
						duration: 2000
					});
				});
				clipboard.on('error', function(e) {
					console.error('Action:', e.action);
					console.error('Trigger:', e.trigger);
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		height: initial;
	}
	.filter-view-bg {
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 13;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}
	.filter-view {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 430rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		z-index: 14;
		overflow: hidden;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;

		.title {
			width: 100%;
			color: #555555;
			font-size: 36rpx;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
		}

		.box-view {
			height: 150rpx;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			display: flex;

			.item {
				height: 70rpx;
				line-height: 70rpx;
				flex: 1;
				text-align: center;
				border-radius: 6rpx;
				border: #e8e8e8 solid 1rpx;
				font-size: 28rpx;
				color: #555555;
				margin: 0 5rpx;
			}

			.item.active {
				background-color: #ff3334;
				color: #FFFFFF;
			}
		}

		.footer {
			height: 100rpx;
			box-sizing: border-box;
			width: 100%;
			border-top: #e8e8e8 solid 20rpx;
			padding-top: 20rpx;

			.button {
				width: 50%;
				background-color: #FFFFFF;
				color: #555555;
				height: 80rpx;
				float: left;
				left: 100rpx;
				line-height: 80rpx;
				text-align: center;
			}

			.button:nth-child(2) {
				border-left: #e8e8e8 solid 1rpx;
			}
		}

	}

	.filter-view.privilegeHideBox {
		transform: translate3d(0rpx, 430rpx, 0rpx);
		transition-duration: 0.5s;
	}

	.filter-view.privilegeActive {
		transform: translate3d(0rpx, 0rpx, 0rpx);
		transition-duration: 0.5s;
	}

	.page-team {
		height: 100%;
		width: 100%;

		.content {
			width: 100%;

			.member {
				.record-bg {
					height: 300rpx;
					width: 100%;

					image {
						width: 300rpx;
						height: 300rpx;
						display: block;
						margin: 0 auto;
					}
				}
			}

			.Recommender {
				width: 100%;
				background-color: #FFFFFF;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;

				.title {
					font-size: 36rpx;
					color: #000000;
					border-bottom: #e8e8e8 solid 1rpx;
					padding: 10rpx 0 20rpx 0;
					margin: 0 30rpx;
				}

				.box {
					width: 100%;
					height: 230rpx;

					.left {
						width: 30%;
						float: left;
						height: 230rpx;
						padding-top: 20rpx;
						text-align: center;

						.userID {
							color: #fc5531;
							font-size: 24rpx;
							text-align: center;

						}

						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
							overflow: hidden;
						}
					}

					.right {
						position: relative;
						width: 70%;
						float: left;
						height: 230rpx;
						padding-top: 20rpx;
						padding-left: 10rpx;

						.phone {
							font-size: 30rpx;
							color: #666;
							padding-top: 20rpx;
						}

						.time {
							font-size: 30rpx;
							color: #666;
							padding-top: 20rpx;
						}

						.store {
							font-size: 30rpx;
							color: #666;
							padding-top: 5rpx;

							text {
								height: 50rpx;
								padding: 7rpx 20rpx;
								line-height: 50rpx;
								color: #FFFFFF;
								background: -webkit-linear-gradient(to left, #ff424c, #faa159);
								/* Safari 5.1-6.0 */
								background: -o-linear-gradient(to left, #ff424c, #faa159);
								/* Opera 11.1-12.0 */
								background: -moz-linear-gradient(to left, #ff424c, #faa159);
								/* Firefox 3.6-15 */
								background: linear-gradient(to left, #ff424c, #faa159);
								/* 标准语法 */
								font-size: 26rpx;
								border-radius: 50rpx;
							}

							.privilege {
								background: none !important;
								color: #39c;

							}
						}

						.name {
							font-size: 30rpx;
							color: #333;
						}

						.tel-phone {
							position: absolute;
							right: 70rpx;
							bottom: 0rpx;
							height: 40rpx;
							line-height: 35rpx;
							padding: 0 10rpx;
							border: #39c solid 1rpx;
							border-radius: 6rpx;
							display: inline-block;

							image {
								width: 100%;
								height: 100%;
							}

							text {
								color: #39c;
							}

							view {
								width: 100%;
								height: 100%;
								font-size: 22rpx;
								color: #39c;
							}
						}

						.copy-phone {
							position: absolute;
							right: 170rpx;
							bottom: 0rpx;
							height: 40rpx;
							line-height: 35rpx;
							padding: 0 10rpx;
							border: #39c solid 1rpx;
							border-radius: 6rpx;
							display: inline-block;

							view {
								width: 100%;
								height: 100%;
								font-size: 22rpx;
								color: #39c;
							}

							image {
								width: 100%;
								height: 100%;
							}
						}

						.Recommender-phone {
							bottom: 0rpx;
						}

						.R-copy-phone {
							right: 150rpx;
							bottom: 0;
						}
					}
				}
			}

			.Statistics {
				margin: 20rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				overflow: hidden;

				.top {
					background-color: #222222;
					width: 100%;
					position: relative;
					border-bottom-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;

					.privilege {
						position: relative;
						height: 100rpx;
						width: 100%;
						background-image: url('https://h5.ylsp.vip/file/static/index-05.png');
						background-size: 100% 100%;

						.icon {
							height: 60rpx;
							width: 60rpx;
							margin-top: 20rpx;
							margin-left: 30rpx;
							float: left;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.privilegeTitle {
							margin-left: 10rpx;
							float: left;
							height: 100rpx;
							line-height: 100rpx;
							color: #FFFFFF;
							font-size: 30rpx;
						}

						.btnDetails {
							position: absolute;
							right: 50rpx;
							top: 20rpx;
							height: 60rpx;
							width: auto;
							padding: 0 30rpx;
							line-height: 60rpx;
							border-radius: 60rpx;
							font-size: 30rpx;
							color: #FFFFFF;
							background: -webkit-linear-gradient(to left, #ff424c, #faa159);
							/* Safari 5.1-6.0 */
							background: -o-linear-gradient(to left, #ff424c, #faa159);
							/* Opera 11.1-12.0 */
							background: -moz-linear-gradient(to left, #ff424c, #faa159);
							/* Firefox 3.6-15 */
							background: linear-gradient(to left, #ff424c, #faa159);
							/* 标准语法 */
						}
					}

					.bgbox {
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						width: 100%;
						background-image: url('https://h5.ylsp.vip/file/static/images/accountBg.png');
						background-size: 100% 100%;
					}

					.title {
						font-size: 36rpx;
						color: #FFFFFF;
						padding: 30rpx 0 0 30rpx;
					}

					.store {
						font-size: 50rpx;
						color: #FFFFFF;
						padding: 20rpx 0 0 30rpx;
					}

					.group {
						font-size: 30rpx;
						color: #FFFFFF;
						padding: 10rpx 0 0 30rpx;
					}

					.total {
						font-size: 30rpx;
						color: #FFFFFF;
						padding: 10rpx 0 30rpx 30rpx;
					}
				}

				.bottom {
					height: 160rpx;
					width: 100%;
					display: table;
					table-layout: fixed;
					border-radius: 10rpx;
					background-color: #FFFFFF;
					margin-top: 30rpx;
				}

				.td {
					position: relative;
					display: table-cell;
					text-align: center;
					vertical-align: middle;

					.span {
						text-align: center;
						font-size: 40rpx;
						font-weight: 900;
					}

					.text {
						text-align: center;
						font-size: 26rpx;
						color: #666;
						padding-top: 26rpx;
					}
				}

				.td:nth-child(1)::before {
					position: absolute;
					content: '';
					height: 40rpx;
					width: 1rpx;
					border-right: #666 solid 2rpx;
					right: 0;
					bottom: 20rpx;
				}
			}

			.directlyUnder {
				width: 100%;
				min-height: 200rpx;
				max-height: 360rpx;
				padding-bottom: 20rpx;
				background-color: #FFFFFF;

			.tab_box {
					width: 100%;
					padding: 0 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.tab_item {
						font-size: 35rpx;
						padding: 15rpx 30rpx;
						cursor: pointer;
						// border: 1px solid red;
					}

					.activeItem {
						border-bottom: 2px solid #ff3334;
					}
				}
				.title {
					color: #000000;
					font-size: 36rpx;
					position: relative;
					padding: 20rpx 30rpx;
				}

				.search {
					min-height: 100rpx;
					max-height: 260rpx;
					padding-bottom: 10rpx;
					margin: 0 30rpx;
					border-bottom: #e8e8e8 solid 1rpx;

					.left {
						width: 70%;
						float: left;
						position: relative;

						.icon {
							position: absolute;
							top: 20rpx;
							right: 30rpx;
							color: #999;
							font-size: 36rpx;
							z-index: 10;
						}

						input {
							background-color: #e8e8e8;
							border-radius: 6rpx;
							padding-left: 20rpx;
							font-size: 28rpx;
							height: 80rpx;
						}

					}

					.list {
						width: 100%;
						overflow: auto;
						column-count: 3;
						-webkit-column-count: 3;

						.tab {
							-webkit-column-break-inside: avoid;
							font-size: 24rpx;
							color: #999;
							padding: 10rpx;
						}
					}

					.right {
						width: 30%;
						float: left;

						.btn {
							height: 80rpx;
							line-height: 80rpx;
							color: #ffffff;
							background-color: #000000;
							font-size: 26rpx;
							margin-left: 20rpx;
							text-align: center;
							border-radius: 6rpx;

							text {
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}

		.page-screen {
			height: 100%;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 10;
		}

		.screen-box {
			position: fixed;
			top: 0;
			right: 0;
			background-color: #FFFFFF;
			height: 100%;
			width: 380rpx;
			z-index: 11;
			overflow: hidden;

			.title {
				font-size: 36rpx;
				color: #555;
				padding: 30rpx 0 0 30rpx;
			}

			.Grade-box {
				height: calc(100% - 260rpx);
				width: 100%;
				overflow-y: auto;
				box-sizing: border-box;
				padding-top: 30rpx;

				.button {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					background-color: #f3f3f3;
					text-align: center;
					width: 250rpx;
					color: #999;
					margin-left: 30rpx;
					margin-bottom: 30rpx;
					border-radius: 10rpx;
				}

				.active {
					background-color: #000000;
					color: #ffffff;
				}
			}

			.defineBtn {
				height: 200rpx;
				width: 100%;
				text-align: center;
				padding-top: 60rpx;
				box-sizing: border-box;

				.tab {
					height: 70rpx;
					line-height: 70rpx;
					color: #FFFFFF;
					padding: 0 30rpx;
					border-radius: 10rpx;
					background-color: #000000;
					display: inline-block;
					margin-right: 40rpx;
				}

				.tab:nth-child(2) {
					background-color: #ff2f50;
				}
			}
		}

		.active {
			transform: translate3d(0rpx, 0rpx, 0rpx);
			transition-duration: 0.5s;
		}

		.hideBox {
			transform: translate3d(380rpx, 0rpx, 0rpx);
			transition-duration: 0.5s;
		}
	}
</style>
